<template>
  <div class="home">
    <!-- 导航菜单栏 -->
    <el-container>
      <el-aside
        :width="isCollapse ? '65px' : '200px'"
        style="
          overflow-y: hidden;
          overflow-x: hidden;
          @open= 'handleOpen';
          @close= 'handleClose';
        "
      >
        <el-menu
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          :default-active="this.$route.path"
          router
          background-color="#324157"
          style="overflow: hidden"
          text-color="#BFCBD9"
          active-text-color="#25A0F4"
          @select="handleMenuSelect"
          :unique-opened="true"
        >
          <!--  :default-active="this.$route.path" 点击显示对应 -->
          <!-- :unique-opened="true"显示对应的下标 -->

          <template v-for="(item, index) in menuData">
            <!-- 首页 -->
            <el-menu-item
              :index="item.path"
              :key="index"
              v-if="item.sonlist == null"
            >
              <i :class="item.pic"></i>
              <span style="margin-right: 114px" slot="title">{{
                item.title
              }}</span>
            </el-menu-item>
            <el-submenu
              :index="(index + 1).toString()"
              :key="item.id"
              v-if="item.sonlist != null"
            >
              <template slot="title">
                <i :class="item.pic"></i>
                <span style="margin-right: 114px" slot="title">{{
                  item.title
                }}</span>
              </template>
              <el-menu-item-group
                v-for="(item, inde) in item.sonlist"
                :key="inde"
              >
                <el-menu-item
                  style="display: flex; text-indent: 0.7rem"
                  :index="item.path"
                  @click="clickson(item)"
                  >{{ item.title }}</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
          </template>
        </el-menu>
      </el-aside>
      <!-- 头部 -->
      <el-container>
        <el-header style="padding: 0px">
          <!-- 旋转展开 -->
          <div class="switch">
            <i
              :class="[rotate ? 'el-icon-s-fold go' : 'el-icon-s-fold open']"
              @click="switchs()"
            ></i>
          </div>
          <!-- 面包屑-->
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/Directory' }"
              >首页</el-breadcrumb-item
            >
            <!-- 获取路由里面的标签 -->
            <el-breadcrumb-item v-if="this.$route.matched[0].name">{{
              this.$route.matched[0].name
            }}</el-breadcrumb-item>
            <el-breadcrumb-item
              v-if="this.$route.meta.title && this.$route.path !== '/Directory'"
              >{{ this.$route.meta.title }}</el-breadcrumb-item
            >
          </el-breadcrumb>
          <div class="anew">
            <el-dropdown :hide-on-click="false">
              <span class="el-dropdown-link">
                <i class="el-avatar el-avatar--large el-avatar--square"></i>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>首页</el-dropdown-item>
                <el-dropdown-item
                  ><span @click="quits">退出登录</span></el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <!-- 底部 -->
        <el-main style="padding: 0;height:500px;" >
          <!--  -->
          <HelloWorld :labelData="labelData"></HelloWorld>
          <el-scrollbar style="height:90%;">
          <router-view />
        </el-scrollbar>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import Ruit from "./../api/login.js";
export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  created() {
    // 如果点击首页就添加
    if (this.$route.path == "/") {
      this.$router.push({
        title: "首页",
        path: "/Directory",
      });
    }
  },
  data() {
    return {
      rotate: false,
      isCollapse: false,
      labelData: [{ title: "首页", path: "/Directory" }],
      menuData: [
        {
          pic: "el-icon-s-home",
          title: "首页",
          path: "/Directory",
        },
        {
          id: 1,
          pic: "el-icon-s-data",
          title: "运营管理",
          sonlist: [
            {
              title: "运费模板管理",
              path: "/operate/Commentmanage",
            },
            {
              title: "评论管理",
              path: "/operate/Freightmanage",
            },
            {
              title: "订单管理",
              path: "/operate/Ordermanage",
            },
          ],
        },
        //商品管理
        {
          id: 2,
          pic: "el-icon-s-shop",
          title: "商品管理",
          sonlist: [
            {
              title: "商品类目",
              path: "/goods/Goodscategory",
            },
            {
              title: "商品列表",
              path: "/goods/Goodslist",
            },
          ],
        },
        //推广管理
        {
          id: 3,
          pic: "el-icon-coin",
          title: "推广管理",
          sonlist: [
            {
              title: "优惠卷管理",
              path: "/promotion/Couponmanage",
            },
            {
              title: "推荐管理",
              path: "/promotion/Recommanage",
            },
            {
              title: "商铺广告",
              path: "/promotion/Shopadvert",
            },
            {
              title: "商铺信息",
              path: "/promotion/Shopsmanage",
            },
          ],
        },
        //系统管理
        {
          id: 4,
          pic: "el-icon-s-tools",
          title: "系统管理",
          sonlist: [
            {
              title: "会员管理",
              path: "/system/Usermanage",
            },
            {
              title: "管理员",
              path: "/system/Adminlist",
            },
            {
              title: "角色管理",
              path: "/system/Rolemanage",
            },
          ],
        },
      ],
    };
  },
  methods: {
    // 退出
    quits() {
      let ADMINTOKEN=this.$cookie.get("Token")
     Ruit.quit(ADMINTOKEN).then(res=>{
       console.log(res)
         if (res.data.errmsg == "成功") {
            this.$router.push("/");
            this.$message({
              message: "退出成功",
              type: "success",
            });
          }
          if (res.data.errmsg !== "成功") {
            this.$message.error(res.data.errmsg);
          }
     })
    },
    // 去重添加
    clickson(e) {
      let items = this.labelData.find((i) => i.title == e.title);
      if (!items) {
        this.labelData.push(e);
      }
      console.log(e, this.labelData);
      // console.log(this.labelData)
    },
    // 开关回收
    switchs() {
      this.isCollapse = !this.isCollapse;
      this.rotate = !this.rotate;
    },
    handleMenuSelect(index, indexPath) {},
  },
};
</script>

<style>
::-webkit-scrollbar{
  display:none;
}

body {
  padding: 0px;
  margin: 0px;
}
>>> .el-main {
  width: 100%;
  overflow: hidden !important;
}
.el-scrollbar{
  height: 90%;
   overflow: hidden !important;
}
.open {
  transition: all 1s;
  overflow: hidden;
}
.go {
  transform: rotate(-180deg);
  transition: all 1s;
}
.el-dropdown {
  height: 50px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.anew {
  width: 100px;
  line-height: 88px;
  height: 88px;
  margin-left: auto;
}
.switch {
  float: left;
  line-height: 100%;
  text-align: center;
  display: flex;
  margin-right: 10px;
}
.switch i {
  font-size: 20px;

  line-height: 60px;
  text-align: center;
}
.home {
  width: 100%;
}

.el-menu-vertical-demo {
  height: 100%;
}
.el-scrollbar__wrap {
  overflow-x: hidden;
}
.el-header,
.el-footer {
  background-color: #ffffff;
  color: #333;
  display: flex;
  line-height: 60px;
}

.el-header .el-breadcrumb {
  line-height: 60px;
}
.el-aside {
  color: #333;
  height: 100vh;
  text-align: center;
  background: #324157;
  overflow-x: hidden;
  overflow-y: auto;
}
.el-menu-item-group__title {
  display: none;
}
.el-main {
  color: #333;
  /* text-align: center; */
  /* line-height: 160px; */
  /* overflow-x: auto; */
}

.el-main::-webkit-scrollbar {
  display: none;
}

body > .el-container {
  margin-bottom: 40px;
  display: flex;
}


.el-scrollbar__view {
  margin-right: 20px;
}
</style>
